/**
 * @Author:刘忻忻,高志斐
 * @Date:2020/7/2
 * @Description:这是风险测评页面
 */
import React from "react";
import {List, Card, Radio, Toast, Icon, WhiteSpace, NavBar} from 'antd-mobile';
import axios from "axios"
import {getCookieId, setRiskCookie} from '../Login/Component_Login/GetCookie';
import {URL} from "../../index";

const RadioItem = Radio.RadioItem;
const len = 10; // 题目数量
//10道风险测评题目
const question = [
    {
        q: '1、您的金融资产情况:',
        as: [
            '≤50万元',
            '50-100万元',
            '100-200万元',
            '200-300万元',
            '≥300万元',
        ]
    },
    {
        q: '2、最近三年您的年均收入:',
        as: [
            '30万元以下',
            '30-50万元',
            '50-100万元',
            '100-500万元',
            '500万元以上',
        ]
    },
    {
        q: '3、您是否有数额较大的债务',
        as: [
            '没有',
            '有，为贷款等长期债务',
            '有，信用卡、消费信贷等短期业务',
            '有，向亲戚朋友借款',
        ]
    },
    {
        q: '4、以下描述符合您实际情况的是:',
        as: [
            '自修并略懂金融、财经、投资类知识',
            '具有金融、财经、投资类学习经历',
            '从事过金融、财经、投资相关工作',
            '我没有金融投资专业知识',
        ]
    },
    {
        q: '5、您的投资经验情况为',
        as: [
            '有限：只把钱存在银行或购买低风险产品',
            '一般：我购买过基金、保险等理财产品',
            '丰富：我参与过股票、基金等产品的交易',
            '非常丰富：我购买过私募等较高风险产品',
        ]
    },
    {
        q: '6、您用于私募投资的大部分资金的投资期限为：',
        as: [
            '短期--0到1年',
            '中期--1到5年',
            '长期--5年以上',
        ]
    },
    {
        q: '7、您希望您购买的私募产品投资于哪些品种',
        as: [
            '债券、货币基金、债券基金等固收类品种',
            '股票、混合型、偏股型基金等权益类品种',
            '期货、融资融券',
            '复杂或高风险金融产品',
            '其它产品',
        ]
    },

    {
        q: '8、当进行投资时，您的首要目标是：',
        as: [
            '资产保值，我不愿意承担任何投资风险',
            '尽可能保证本金安全，不在乎收益率较低',
            '产生较多的收益，可承担一定的投资风险',
            '实现资产增长，愿意承担很大的投资风险',
        ]
    },
    {
        q: '9、您认为自己能承受的最大投资损失是',
        as: [
            '10%以内',
            '10%-30%',
            '30%-50%',
            '可超过50%',
        ]
    },
    {
        q: '10、您的年龄是:',
        as: [
            '30岁及以下',
            '31-40岁',
            '41-50岁',
            '51-60岁',
            '超过60岁',
        ]
    }
]

export default class RiskEval extends React.Component {
    state = {
        DEGREE: ['0', '1', '2', '3', '4'],//风险等级
        ans: [],  // 答案数组
        curIndex: 0, // 当前题目
        userid: '1',
        seconds: 3,//延迟跳转的时间
    };

    // 上下题按钮点击  b==-1 : 上一题
    onSubmit = (b) => {
        var index = this.state.curIndex;
        if (b === -1) {
            if (index > 0) {
                index--;
            } else {
                // 越界检查
                Toast.info("这是第一题哦！")
            }
            document.getElementById('btn-next-question').innerText = "下一题";
        }
        else {
            if (index < len - 1) {
                index++;
                if (index === len - 1) {
                    // 如果是最后一题了，按钮文字改为提交
                    document.getElementById('btn-next-question').innerText = "提交";
                }
            } else {
                // 最后一题，提交
                // 要检查是否每个题是否都选了
                if (this.state.ans.length < 10) {
                    Toast.info("请回答全部问题！");
                } else {
                    // 提交
                    var riskResult = '';
                    // 拼接答案为api格式
                    this.state.ans.map((v) => {
                        riskResult += v;
                    })
                    axios({
                        method:"GET",
                        url:URL + "/userInfo/calculateRiskLevel",
                        params: {
                            userId: getCookieId(),  // id
                            riskResult: riskResult // 风险测评字符串
                        }
                    }).then(res => {
                            if (res.data.code === 200) {
                                setRiskCookie(Number(res.data.riskNum))
                                this.props.history.push("/riskLevelReturn")
                            } else {
                                Toast.fail('提交失败');
                            }
                    })
                }
            }
        }
        this.setState({
            curIndex: index
        });
    }
    onChange = (q, v) => {

        // 修改state里的ans答案
        var ant = this.state.ans;
        ant[q] = this.state.DEGREE[v];
        this.setState({
            ans: ant
        });
        if (this.state.curIndex < len - 1)
            this.state.curIndex++;
        if (this.state.curIndex === len - 1) {
            // 改变按钮文字
            document.getElementById('btn-next-question').innerText = "提交";
        }
    };
    render() {
        return (
            <div>
                <NavBar
                    mode="light"
                    icon={<Icon type="left" style={{color:"#f8a83f"}}/>}
                    onLeftClick={() => window.history.back(-1)}
                >风险测评问卷</NavBar>
                <WhiteSpace/>
                <WhiteSpace/>
                <Card>
                        <Card.Header
                            title={question[this.state.curIndex].q} style={{ lineHeight: '1.5em' }}
                        />

                        <Card.Body>
                            <List>
                                {question[this.state.curIndex].as.map((a, a_index) => (
                                    <RadioItem
                                        key={'' + this.state.curIndex + a_index}
                                        checked={this.state.ans[this.state.curIndex] === this.state.DEGREE[a_index]}
                                        onChange={() => this.onChange(this.state.curIndex, a_index)}>
                                        <div className='risk-ans-container'>{a}</div>
                                    </RadioItem>))}
                            </List>
                        </Card.Body>
                </Card>
                <div className='submit-container'>
                    <button onClick={() => this.onSubmit(-1)} >上一题</button>
                    <button id='btn-next-question' onClick={() => this.onSubmit(1)} >下一题</button>
                </div>
            </div>

        )
    }
}
